<template>
    <div class="page-container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span class="title">库存管理</span>
                </div>
            </template>
            
            <!-- 搜索区域 -->
            <div class="search-area">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="商品名称">
                        <el-input 
                            v-model="searchForm.goodsName" 
                            placeholder="请输入商品名称" 
                            clearable 
                            class="custom-input"
                        />
                    </el-form-item>
                    <el-form-item label="商品分类">
                        <el-select 
                            v-model="searchForm.category" 
                            placeholder="请选择分类" 
                            clearable 
                            class="custom-input"
                        >
                            <el-option
                                v-for="item in categoryOptions"
                                :key="item.id"
                                :label="item.categoryName"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch" class="search-button">
                            <el-icon><Search /></el-icon>查询
                        </el-button>
                        <el-button @click="resetForm" class="reset-button">
                            <el-icon><Refresh /></el-icon>重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 表格区域 -->
            <el-table 
                :data="tableData" 
                style="width: 100%" 
                border 
                stripe
                :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 'bold' }"
                :row-style="{ height: '60px' }"
                :cell-style="{ padding: '8px 0' }"
                highlight-current-row>
                <el-table-column label="序号" width="80" type="index" align="center" />
                <el-table-column prop="goodsName" label="商品名称" min-width="150" align="center" />
                <el-table-column prop="category" label="商品分类" width="120" align="center" />
                <el-table-column prop="quantity" label="库存数量" width="120" align="center">
                    <template #default="{ row }">
                        <span :class="['stock-quantity', row.quantity < 10 ? 'low-stock' : '']">
                            {{ row.quantity }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="location" label="存放位置" width="150" align="center" />
                <el-table-column prop="last_updated" label="最后更新时间" width="180" align="center" />
                <el-table-column label="操作" width="100" align="center" fixed="right">
                    <template #default="{ row }">
                        <div class="operation-buttons">
                            <el-tooltip content="查看" placement="top">
                                <el-button type="primary" circle @click="handleView(row)" size="small">
                                    <el-icon><View /></el-icon>
                                </el-button>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="暂无库存数据" />
                </template>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-card>

        <!-- 库存详情对话框 -->
        <el-dialog
            v-model="dialogVisible"
            width="500px"
            class="custom-dialog"
            destroy-on-close
            :show-close="false"
        >
            <template #header>
                <div class="dialog-header">
                    <div class="dialog-title">
                        <el-icon class="title-icon"><View /></el-icon>
                        <span>库存详情</span>
                    </div>
                    <el-button class="close-button" @click="dialogVisible = false" circle>
                        <el-icon><Close /></el-icon>
                    </el-button>
                </div>
            </template>
            <div class="dialog-content">
                <el-descriptions :column="1" border>
                    <el-descriptions-item label="库存ID">{{ currentInventory.inventory_id }}</el-descriptions-item>
                    <el-descriptions-item label="商品名称">{{ currentInventory.goodsName }}</el-descriptions-item>
                    <el-descriptions-item label="商品分类">{{ currentInventory.category }}</el-descriptions-item>
                    <el-descriptions-item label="库存数量">
                        <span :class="['stock-quantity', currentInventory.quantity < 10 ? 'low-stock' : '']">
                            {{ currentInventory.quantity }}
                        </span>
                    </el-descriptions-item>
                    <el-descriptions-item label="存放位置">{{ currentInventory.location }}</el-descriptions-item>
                    <el-descriptions-item label="最后更新时间">{{ currentInventory.last_updated }}</el-descriptions-item>
                </el-descriptions>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false" class="close-dialog-button">
                        <el-icon><Close /></el-icon>关闭
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Refresh, View, Close } from '@element-plus/icons-vue'
import { getCategoryListService } from '@/api/category.js'
import { getInventoryListService } from '@/api/inventory.js'

// 搜索表单
const searchForm = reactive({
    goodsName: '',
    category: ''
})

// 分类选项
const categoryOptions = ref([])

// 获取分类列表
const getCategoryList = async () => {
    try {
        const res = await getCategoryListService()
        if (res.code === 0) {
            categoryOptions.value = res.data
        } else {
            ElMessage.error(res.message || '获取分类列表失败')
        }
    } catch (error) {
        console.error('获取分类列表失败:', error)
        ElMessage.error('获取分类列表失败')
    }
}

// 页面加载时获取分类列表
onMounted(() => {
    getCategoryList()
    handleSearch() // 页面加载时自动查询库存列表
})

// 表格数据
const tableData = ref([])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 对话框相关
const dialogVisible = ref(false)
const currentInventory = ref({})

// 查询库存列表
const handleSearch = async () => {
    try {
        // 构建查询参数
        const params = {
            pageNum: currentPage.value,
            pageSize: pageSize.value,
            goodsName: searchForm.goodsName ? searchForm.goodsName : undefined,
            category: searchForm.category ? searchForm.category : undefined
        }
        
        const res = await getInventoryListService(params)
        
        if (res.code === 0) {
            // 更新表格数据和总数
            tableData.value = res.data.items
            total.value = res.data.total
            
            // 处理特殊字段，比如分类名称显示
            for (const item of tableData.value) {
                // 查找分类名称
                if (item.categoryId && categoryOptions.value.length > 0) {
                    const category = categoryOptions.value.find(c => c.id === item.categoryId)
                    if (category) {
                        item.category = category.categoryName
                    }
                }
            }
        } else {
            ElMessage.error(res.message || '获取库存列表失败')
        }
    } catch (error) {
        console.error('获取库存列表失败:', error)
        ElMessage.error('获取库存列表失败')
    }
}

// 重置表单
const resetForm = () => {
    searchForm.goodsName = ''
    searchForm.category = ''
    currentPage.value = 1 // 重置到第一页
    handleSearch()
}

// 查看详情
const handleView = (row) => {
    currentInventory.value = row
    dialogVisible.value = true
}

// 分页相关方法
const handleSizeChange = (val) => {
    pageSize.value = val
    handleSearch()
}

const handleCurrentChange = (val) => {
    currentPage.value = val
    handleSearch()
}
</script>

<style lang="scss" scoped>
.page-container {
    padding: 20px;
    
    .box-card {
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transition: all 0.3s;

        &:hover {
            box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
        }
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;

        .title {
            font-size: 16px;
            font-weight: bold;
            color: #303133;
        }
    }

    .search-area {
        margin-bottom: 20px;
    }

    .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
    }

    .stock-quantity {
        font-weight: bold;
        color: #67c23a;

        &.low-stock {
            color: #f56c6c;
        }
    }
}

.custom-input {
    width: 220px;
}

.search-button, .reset-button {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    
    .el-icon {
        margin-right: 4px;
        font-size: 16px;
    }
}

.search-button {
    background-color: var(--el-color-primary) !important;
    border-color: var(--el-color-primary) !important;
    color: white !important;
    
    &:hover {
        background-color: var(--el-color-primary-light-3) !important;
        border-color: var(--el-color-primary-light-3) !important;
    }
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e4e7ed;
    
    .dialog-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: bold;
        
        .title-icon {
            font-size: 20px;
            color: var(--el-color-primary);
        }
    }
}

.dialog-content {
    padding: 20px;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.close-dialog-button {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    
    .el-icon {
        margin-right: 4px;
        font-size: 16px;
    }
}

.operation-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

:deep(.el-descriptions) {
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 4px;
}

:deep(.el-dialog__body) {
    padding: 20px;
}

.el-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
</style> 